<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .content-cell {
            max-width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">文章管理后台</h1>
                <p class="text-gray-600 mt-2">共 {{ posts|length }} 篇文章</p>
            </div>
            <div class="flex gap-4">
                <a href="{{ url_for('new_post') }}" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
                    添加新文章
                </a>
                <a href="{{ url_for('logout') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
                    退出登录
                </a>
            </div>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="mb-4 p-4 rounded {% if category == 'error' %}bg-red-100 text-red-700{% else %}bg-green-100 text-green-700{% endif %}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div class="bg-white rounded-lg shadow overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">标题</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-2/6">内容</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">测试</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">URL</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/12">爆款</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">创建时间</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for post in posts %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4">
                            <div class="text-sm font-medium text-gray-900">{{ post.title }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="content-cell text-sm text-gray-900">{{ post.content }}</div>
                        </td>
                        <td class="px-6 py-4">
                            {% if post.has_volume %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                测试有量
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            {% if post.url %}
                            <a href="{{ post.url }}" target="_blank" class="text-blue-600 hover:text-blue-800 text-sm">查看链接</a>
                            {% else %}
                            <span class="text-gray-400 text-sm">-</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            {% if post.is_hot %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                爆款
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">
                            {{ post.created_at if post.created_at else '' }}
                        </td>
                        <td class="px-6 py-4 text-sm font-medium">
                            <div class="flex space-x-3">
                                <a href="{{ url_for('edit_post', post_id=post._id) }}" class="text-blue-600 hover:text-blue-900">编辑</a>
                                <form action="{{ url_for('delete_post', post_id=post._id) }}" method="POST" class="inline">
                                    <button type="submit" class="text-red-600 hover:text-red-900" onclick="return confirm('确定要删除这篇文章吗？')">删除</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
